<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      rel="stylesheet"
      href="/node_modules/bootstrap-icons/font/bootstrap-icons.css"
    />
    <style>
      body {
        font-family: "宋体", "Courier New", Courier, monospace;
      }
      ul {
        list-style-type: none;
        padding-left: 8px;
      }

      li {
        padding: 1px 0;
        font-size: 11px;
      }

      li:hover {
        background-color: #f0f0f0;
      }

      /* 折叠图标样式 */
      .collapse-icon {
        width: 12px;
        height: 12px;
        display: inline-block;
      }

      /* 展开状态图标 */
      .collapse-icon.expand {
        content: "\f282";
      }

      /* 折叠状态图标 */
      .collapse-icon.collapsed {
        content: "\f285";
      }
    </style>
  </head>

  <body>
    <button onclick="addNode()">添加节点</button>
    <div id="treeContainer"></div>

    <script>
      function getRandomInt(min, max) {
        min = Math.ceil(min);
        max = Math.floor(max);
        return `${Math.floor(Math.random() * (max - min + 1)) + min}`;
      }

      // 生成 1 到 10 之间（包括 1 和 10）的随机整数
      class TreeNode {
        constructor(value) {
          this.value = value;
          this.children = [];
          this.collapsed = false;
        }

        addChild(child) {
          this.children.push(child);
        }
      }

      function buildTreeUI(root) {
        const container = document.createElement("ul");

        function traverse(node, depth) {
          const indent = "&nbsp;".repeat(depth * 2);
          const li = document.createElement("li");

          // 创建折叠图标
          const collapseIcon = document.createElement("i");
          collapseIcon.className = "bi-caret-right-fill";
          function collapseIconClass() {
            if (node.children.length > 0) {
              node.collapsed = !node.collapsed;
              const updatedTreeUI = buildTreeUI(root);
              document.getElementById("treeContainer").innerHTML = "";
              document
                .getElementById("treeContainer")
                .appendChild(updatedTreeUI);
            }
          }
          li.innerHTML = `${indent}${collapseIcon.outerHTML}${node.value} <button onclick="addChild(this)">+</button>`;
          container.appendChild(li);

          if (!node.collapsed && node.children.length > 0) {
            for (const child of node.children) {
              traverse(child, depth + 1);
            }
          }
        }

        traverse(root, 0);

        return container;
      }

      // 创建根节点
      const root = new TreeNode("Root");

      // 渲染初始树 UI
      const treeUI = buildTreeUI(root);
      document.getElementById("treeContainer").appendChild(treeUI);

      function addNode() {
        const newNodeValue = `--li ${getRandomInt(1, 100000)}`;
        if (newNodeValue) {
          const newNode = new TreeNode(newNodeValue);
          root.addChild(newNode);
          const updatedTreeUI = buildTreeUI(root);
          document.getElementById("treeContainer").innerHTML = "";
          document.getElementById("treeContainer").appendChild(updatedTreeUI);
        }
      }

      function addChild(button) {
        const parentLi = button.parentNode;
        const parentNodeValue = parentLi.textContent.trim().split(" ")[0];
        const parentNode = findNode(root, parentNodeValue);

        const newChildValue = `--li ${getRandomInt(1, 100000)}`;
        if (newChildValue) {
          const newChild = new TreeNode(newChildValue);
          parentNode.addChild(newChild);
          const updatedTreeUI = buildTreeUI(root);
          document.getElementById("treeContainer").innerHTML = "";
          document.getElementById("treeContainer").appendChild(updatedTreeUI);
        }
      }

      function findNode(node, value) {
        if (node.value === value) {
          return node;
        }
        for (const child of node.children) {
          const found = findNode(child, value);
          if (found) {
            return found;
          }
        }
        return null;
      }
    </script>
  </body>
</html>
